<template>
  <div>
    <div class="gameBox">
      <GameItem
        v-for="item in loadingGamesInfo.list"
        :key="item.id"
        :itemInfo="item"
      />
    </div>
    <!-- 加载框 -->
    <div class="loadMore">
      <div class="progress_bar">
        <div class="progress_bar_box">
          <div class="progress">
            <div class="progress_item" :style="`width: ${percent}%`"></div>
          </div>
          <div>{{ percent }}%</div>
        </div>
        <div
          class="progress_bar_btn"
          v-if="percent !== 100"
          @click="emits('addMore')"
        >
          <div v-if="loadingGamesInfo.loading" class="progress_bar_lod">
            <div class="progress_bar_lod_item"></div>
            <div class="progress_bar_lod_item"></div>
            <div class="progress_bar_lod_item"></div>
          </div>
          <p v-else class="progress_bar_btn_p">{{ lang.carregar_mais }}</p>
          <!---->
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import GameItem from "./GameItem.vue";

const lang: any = getCurrentPageLang("system");
const props = defineProps({
  loadingGamesInfo: {
    type: Object as any,
    default: () => {},
  },
});

const percent = computed(() => {
  if (props.loadingGamesInfo.percent) return props.loadingGamesInfo.percent;
  return 100;
});

const emits = defineEmits(["addMore"]);
</script>

<style scoped lang="scss">
.gameBox {
  width: 100%;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  column-gap: 0.1rem;
  row-gap: 0.1rem;
  padding-bottom: 0.1rem;
  padding: 0.3rem;
}
.loadMore {
  margin-top: 0.2rem;
}
.progress_bar {
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.4rem;
}
.progress_bar_box {
  display: flex;
  -webkit-box-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  align-items: center;
  font-weight: 400;
  font-size: 0.32rem;
  gap: 0.115rem;
  color: var(--theme-neutral1);
}
.progress {
  width: 2rem;
  height: 0.2rem;
  border-radius: 2rem;
  background: var(--theme-color9);
  margin: 0rem 5px;
  overflow: hidden;
  font-weight: 600;
}
.progress_item {
  height: 0.2rem;
  border-radius: 2rem;
  background: var(--theme-dec4);
}
.progress_bar_btn {
  background-color: #fd66b1;
  border-radius: 0.22rem;
  padding: 0.25rem 0.45rem;
  display: flex;
  align-items: center;
  cursor: pointer;
  justify-content: center;
}
.progress_bar_btn .progress_bar_btn_p {
  font-size: 0.4rem;
  color: var(--theme-neutral1);
}
.progress_bar_lod {
  margin: 0 auto;
  display: flex;
  -webkit-box-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  align-items: center;
  gap: 0.15rem;
}
@keyframes breathe-bba47fd7 {
  0%,
  100% {
    opacity: 0.2;
  }
  50% {
    opacity: 0.8;
  }
}
.progress_bar_lod .progress_bar_lod_item {
  width: 0.1rem;
  height: 0.1rem;
  border-radius: 1rem;
  margin: 0px 0.03rem;
  background: var(--theme-neutral1);
  animation: 1.2s ease 0s infinite normal none running breathe-bba47fd7;
}
.progress_bar_lod .progress_bar_lod_item:nth-of-type(2) {
  animation-delay: 0.4s;
}
.progress_bar_lod .progress_bar_lod_item:nth-of-type(3) {
  animation-delay: 0.8s;
}
</style>
